<template>
  <div  class="app-container">
    <v-form-render :form-json="formJson" :form-data="formData" :option-data="optionData" ref="vFormRef">
    </v-form-render>
    <el-button type="primary" @click="submitForm">保存</el-button>
  </div>
</template>
<script>
import {getTableInfo,dynamicFormAdd,dynamicFormUpdate,getDataDetail} from "@/api/tool/gen";

export default {
  data() {
    return {
      /* 注意：formJson是指表单设计器导出的json，此处演示的formJson只是一个空白表单json！！ */
      formJson: {"widgetList":[],"formConfig":{"labelWidth":80,"labelPosition":"left","size":"","labelAlign":"label-left-align","cssCode":"","customClass":"","functions":"","layoutType":"PC","onFormCreated":"","onFormMounted":"","onFormDataChange":""}},
      formData: {},
      optionData: {},
      fid:null,
      did:null,
    }
  },
  mounted() {
    this.fid = this.$route.query.fid
    this.did = this.$route.query.did

    console.log(this.did)
    console.log(this.fid)
    getTableInfo(this.$route.query.fid).then(res=>{
      console.log(res.data.formDesc)
      this.$refs.vFormRef.setFormJson(res.data.formDesc)
      if( this.did!=0){
        getDataDetail({tableId:this.fid,id: this.did}).then(res0=>{
          this.$nextTick(() => {
            this.$refs.vFormRef.setFormData(res0.data.formData)
          })
        })
      }
     // this.formJson = res.data.formDesc
    })
  },
  methods: {
    submitForm() {
      this.$refs.vFormRef.getFormData().then(formData => {
        let obj={};
          obj.tableId=this.fid;
          obj.id =this.did
          obj.formData =formData;
        if(this.did==0){
          dynamicFormAdd(obj).then(res=>{
            this.$message.success("已保存")
          });
        }else {
          dynamicFormUpdate(obj).then(res=>{
            this.$message.success("已保存")
          });
        }
        // Form Validation OK
        alert( JSON.stringify(formData) )
      }).catch(error => {
        // Form Validation failed
        this.$message.error(error)
      })
    }
  }
}
</script>
